<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/sign.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/sign.js"></script>
</head>
<body>
    
    
    <div id="sign">
        <canvas></canvas>
    </div>
    
    <script type="text/javascript">
        $.fn.extend({
            sign:function(){
                if(this.find("canvas").length == 0){
                    this.append("<canvas></canvas>");
                }
                var cvs = this.find("canvas");
                cvs.prop("width", this.width());
                cvs.prop("height", this.height());
                var ctx =  cvs[0].getContext("2d");
                ctx.strokeStyle = "#333";
                cvs.attr('drawing', "0");
                ctx.fillRect(0,0,50,50);
                cvs.mousedown(function(e){
                    cvs.attr("drawing", "1");
                    ctx.beginPath();
                    ctx.moveTo(e.pageX - cvs.offset().left, e.pageY - cvs.offset().top);
                })
                cvs.mousemove(function(e){
                    if(cvs.attr("drawing") == 1){
                        ctx.lineTo(e.pageX - cvs.offset().left, e.pageY - cvs.offset().top);
                        ctx.moveTo(e.pageX - cvs.offset().left, e.pageY - cvs.offset().top);
                        ctx.closePath();
                        ctx.stroke();
                        ctx.beginPath();
                        ctx.moveTo(e.pageX - cvs.offset().left, e.pageY - cvs.offset().top);
                    }
                })
                cvs.mouseup(function(e){
                    cvs.attr("drawing", "0");
                    ctx.lineTo(e.pageX - cvs.offset().left, e.pageY - cvs.offset().top);
                    ctx.closePath();
                    ctx.stroke();
                })
            }
        })
        $(function(){
            $("#sign").sign();
        })
    </script>
</body>
</html>